<template>
  <div id="funCards">
    <div class="item-box" v-for="cards in list" :key="cards.title">
      <div class="img-box" @click="handleImgCheck(cards)">
        <img :src="cards.img" alt="" />
      </div>
      <div class="title">{{ cards.title }}</div>
    </div>
  </div>
  <div class="service_box">
    <div class="service_nav">
      <div class="service_title">咨询师团队</div>
      <div class="service_left" @click="more">
        更多 <ArrowRight style="width: 1em; height: 1em; margin-right: 8px" />
      </div>
    </div>
  </div>
  <div class="service_bottom" v-for="item in tableList" :key="item.id">
    <div class="left">
      <div class="img"><img :src="item.picUrl" /></div>
      <div>
        <p class="name">{{ item.name }}</p>
        <p class="txt">{{ item.title }}</p>
      </div>
    </div>
    <div class="right">
      <span @click="appointment(item)">{{
        item.isReserve ? '已预约' : '预约'
      }}</span>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import img1 from '../../../../assets/images/daxuek.png';
import img2 from '../../../../assets/images/zhuanyeku.png';
import img3 from '../../../../assets/images/fenshuxian.png';
import img4 from '../../../../assets/images/picixian.png';
import img5 from '../../../../assets/images/xuanke.png';
import img6 from '../../../../assets/images/ceping.png';
import img7 from '../../../../assets/images/zhaozhuanjia.png';
import img8 from '../../../../assets/images/monitianbao.png';
import { getExpertsTeamList } from '@/api/shopServe/shopServe';
import { getReserveExperts } from '@/api/experts/experts';
import { useRouter } from 'vue-router';
const store = useStore();
const router = useRouter();
const tableList = ref([]);
const list = ref([
  { img: img1, title: '大学库', url: '/college/searchCollege' },
  { img: img2, title: '专业库', url: '/majorLibrary' },
  { img: img3, title: '分数线', url: '/scoreLine' },
  { img: img4, title: '批次线', url: '/picixian' },
  { img: img5, title: '选科', url: '/optional' },
  { img: img6, title: '测评', url: '/appraisal' },
  { img: img7, title: '找专家', url: '/experts' },
  { img: img8, title: '模拟填报', url: '/batchInfo' },
]);
const expertsData = ref({
  source: 'PC',
  experNumId: '',
  expertName: '',
  studentName: store.getters.user.userInfo.nick,
  studentMobile: store.getters.user.userInfo.phone,
});
const handleImgCheck = (item) => {
  router.push({ path: item.url });
};
const more = () => {
  router.push({ path: 'experts' });
};
const appointment = (item) => {
  expertsData.value.experNumId = item.id;
  expertsData.value.expertName = item.name;
  getReserveExperts(expertsData.value).then((res) => {
    if (res.data.code == 20000) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      tableData();
    }
  });
};
const tableData = async () => {
  let params = {
    studentMobile: store.getters.user.userInfo.phone,
  };
  try {
    // 可能会抛出错误的代码
    let { data } = await getExpertsTeamList(params);
    tableList.value = data.data.slice(0, 4);
  } catch (error) {
    // 处理错误的代码
    console.error('发生了一个错误:', error);
  }
};
onMounted(() => {
  tableData();
});
</script>

<style lang="scss" scoped>
#funCards {
  // margin-top: 50px;
  padding: 40px 15px;
  width: 330px;
  height: 350px;
  box-shadow: 3px 0 20px 0 #ddd;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  border-radius: 8px;
  overflow: hidden;
  img {
    background: var(--background-color);
  }
  .item-box {
    cursor: pointer;
    flex-wrap: wrap;
    // margin: 0 10px;
    width: 100px;
    height: 100px;
    .title {
      text-align: center;
    }
    .img-box {
      width: 60px;
      height: 60px;
      border-radius: 4px;
      overflow: hidden;
      margin: 0 auto 2px;
      transition: transform 0.3s; // 添加过渡效果
    }
    .img-box:hover {
      transform: translateY(-6px); // 鼠标移入时向上跳动
    }
  }
}
.service_box {
  width: 100%;
  background-color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  .service_nav {
    display: flex;
    justify-content: space-between;
    .service_title {
      font-size: 18px;
      font-weight: bold;
      position: relative; /* 确保可以使用绝对定位 */
    }
    .service_title::before {
      content: '';
      border-left: 4px solid rgb(255, 103, 0);
      height: 100%;
      display: inline-block;
      position: absolute; /* 绝对定位 */
      left: -10px; /* 根据需要调整位置 */
      top: 50%; /* 垂直居中，根据需求调整 */
      transform: translateY(-50%); /* 垂直居中对齐 */
    }
    .service_left {
      display: flex;
      align-items: center;
      color: #999;
      cursor: pointer;
    }
  }
}
.service_bottom {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  .right {
    span {
      background-color: rgb(255, 103, 0);
      padding: 5px 20px;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
.left {
  display: flex;
  align-items: center;
  .name {
    color: #000;
    font-size: 16px;
    font-weight: bold;
  }
  .txt {
    color: #999;
    font-size: 14px;
    margin-top: 5px;
  }
}
.img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
</style>
